<template>
	<view>
		商品列表页
		<view class="tabList">
			<view v-for="(item,index) in tabList" 
			
			@tap="changeTab(index)"
			class="tabchild" :key="item.name">
			<view :class="{red : current == index}">
				{{ item.name }}
			</view>
				
				<view class="iconBox" v-if="index == 1 || index == 2">
					<uni-icons type="arrowup" 
					:color="item.isIconSelected == 'up' ? 'red' : '' " size="15"></uni-icons>
					<uni-icons type="arrowdown" 
					:color="item.isIconSelected == 'down' ? 'red' : '' "
					 size="15"></uni-icons>
				</view>
			</view>
		</view>
		<view class="list">
			<view v-for="item in list" class="item" :key="item.id" @tap="goInfo(item.id)">
				<image :src="item.pic" mode=""></image>
				<view>
					{{ item.name }}
					{{ item.price }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findProductList
	} from "@/api/home/index.js"
	export default {
		name:"list",
		data() {
			return {
				current:0,
				start:1,
				limit:4,
				id:"",
				isDesc:0,
				sortBy:"",
				total:0,
				list:[],
				tabList:[
					{
						name:"新品",
						isIconSelected:"default" , // default up down
					},
					{
						name:"销量",
						isIconSelected:"default" , // default up down
					},
					{
						name:"价格",
						isIconSelected:"default" , // default up down
					},
					{
						name:"筛选",
						isIconSelected:"default" , // default up down
					},
				]
			};
		},
		onPullDownRefresh(){
			// 重置分页为初始状态
			this.start = 1;
			this.list=[];
			this.init();
		},
		onReachBottom(){
			console.log("上拉触发");
			// 当请求到最后一页数据的时候  不能继续向下请求数据
			// this.list.length this.total
			if(this.list.length  < this.total){// 9 9
				this.init();
			}
		},
		methods:{
			goInfo(id){
				uni.navigateTo({
					url:`./info/info?id=${id}`
				})
			},
			async init(){
				var res = await findProductList(this.start,this.limit,{
					"categoryId": this.id,
					"isDesc": this.isDesc,
					"sortBy": this.sortBy
				})
				console.log(res);
				this.start ++;
				this.total = res.data.total;
				uni.stopPullDownRefresh();
				this.list.push(...res.data.rows)
			},
			changeTab(val){
				this.current = val;
				this.list = [];
				this.start = 1;
				// 点击tab栏  其他tab栏需要重置成初始状态
				this.tabList.forEach((ele,idx) =>{
					if(idx == val){
						
					}else{
						ele.isIconSelected = "default"
					}
					
				});
				var item = this.tabList.find((ele,idx) =>idx == val);
				if(item.name == "销量"){
					this.sortBy = "sale"
				}
				if(item.name == "价格"){
					this.sortBy = "price"
				}
				if(item.isIconSelected == "default"){
					item.isIconSelected = "up";
					this.isDesc = 1;
				}else if(item.isIconSelected == "up"){
					item.isIconSelected = "down";
					this.isDesc = 0;
				}else{
					item.isIconSelected = "up";
					this.isDesc = 1;
				}
				
				this.init();
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			// console.log(getApp().globalData)
			// console.log(uni.getStorageSync("id"));
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	.tabList{
		display: flex;
		align-items: center;
		justify-content: space-around;
		.red{
			color: red;
		}
		.tabchild{
			display: flex;
			align-items: center;
			justify-content: center;
			.iconBox{
				display: flex;
				flex-direction: column;
			}
		}
	}
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
		margin: 0 auto;
		flex-wrap: wrap;
		.item{
			width: 48%;
			image{
				width: 100%;
			}
		}
	}
</style>
